<!DOCTYPE html>
<html>

<head>
    <title>博客详情</title>

    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <script type="application/x-javascript">
        addEventListener("load", function() {
            setTimeout(hideURLbar, 0);
        }, false);

        function hideURLbar() {
            window.scrollTo(0, 1);
        }
    </script>

    <link href="../../css/bootstrap.css" rel="stylesheet" type="text/css" media="all" />
    <link href="../../css/style.css" rel="stylesheet" type="text/css" media="all" />
    <!-- js -->
    <script src="../../js/jquery-1.11.1.min.js"></script>
    <script src="../../js/single.js"></script>
    <script src="../../js/vue.js"></script>
    <!-- //js -->
    <!-- start-smoth-scrolling -->
    <script type="text/javascript">
        jQuery(document).ready(function($) {
            $(".scroll").click(function(event) {
                event.preventDefault();
                $('html,body').animate({
                    scrollTop: $(this.hash).offset().top
                }, 1000);
            });
        });
    </script>
    <!-- start-smoth-scrolling -->
    <link href='http://fonts.googleapis.com/css?family=Raleway:400,100,200,300,500,600,700,800,900' rel='stylesheet' type='text/css'>
</head>

<body>
   <div id="app">
         <!-- header -->
    <div class="header">
        <div class="container">
            <div class="header-nav">
                <nav class="navbar navbar-default">
                    <div class="navbar-header">
                        <a class="navbar-brand" href="index.html"><img src="../../images/logo.png"></a>
                    </div>
                    <div class="collapse navbar-collapse nav-wil" id="bs-example-navbar-collapse-1">
                        <ul class="nav navbar-nav">
                            <li class="hvr-bounce-to-bottom"><a href="../../index.html">主页</a></li>
                            <li class="hvr-bounce-to-bottom"><a href="../../about.html">关于</a></li>
                            <li class="hvr-bounce-to-bottom"><a href="../../menu.html">菜谱</a></li>
                            <li class="hvr-bounce-to-bottom active"><a href="../../blog.html">论坛交流</a></li>
                            <li class="hvr-bounce-to-bottom"><a href="../../contact.html">发布</a></li>
                            <li class="hvr-bounce-to-bottom"><a href="login.html">登录</a></li>
                        </ul>
                    </div>

                </nav>
            </div>
        </div>
    </div>
    <!-- //header -->
    <!-- single -->
    <div class="single">
        <div class="container">
            <h3>{{blog.title}}</h3>
            <p>发布于<span>{{blog.created_time}}</span></p>
            <img :src="blog.img_url" alt=" " class="img-responsive" />
            <div class="single-left">
               
                
            </div>
            <div class="single-right">
                <h4>{{blog.theme}}</h4>
                <p>{{blog.desc}}</p>
            </div>
            <div class="clearfix"> </div>
            
           
            <div class="three-com">
                <h3>{{comments.length}} 评论 <span>发布</span> <label></label></h3>
                <div class="tom-grid" v-for="comment in comments" :key="comment.id">
                    <div class="tom">
                        <img src="../../images/co.png" alt=" " />
                    </div>
                    <div class="tom-right">
                        <div class="Hardy">
                            <h4>{{comment.username}}</h4>
                            <p><label>{{comment.created_time}}</label></p>
                        </div>
                        <div class="reply" v-if="auth=='1'">
                            <a @click="deleteCommentById(comment.id)">删除</a>
                        </div>
                        <div class="clearfix"> </div>
                        <p class="lorem">{{comment.content}}</p>
                    </div>
                    <div class="clearfix"> </div>
                </div>
                <!-- <div class="tom-grid humour">
                    <div class="tom">
                        <img src="../../images/co.png" alt=" " />
                    </div>
                    <div class="tom-right">
                        <div class="Hardy">
                            <h4>用飘柔的和尚</h4>
                            <p><label>2021. 2. 8</label></p>
                        </div>
                        <div class="reply">
                            <a href="#">回复</a>
                        </div>
                        <div class="clearfix"> </div>
                        <p class="lorem">离开家乡好多年了，好想念家乡的美食。</p>
                    </div>
                    <div class="clearfix"> </div>
                </div> -->
                <!-- <div class="tom-grid">
                    <div class="tom">
                        <img src="../../images/co.png" alt=" " />
                    </div>
                    <div class="tom-right">
                        <div class="Hardy">
                            <h4>李佳德</h4>
                            <p><label>2021. 3. 18</label></p>
                        </div>
                        <div class="reply">
                            <a href="#">回复</a>
                        </div>
                        <div class="clearfix"> </div>
                        <p class="lorem">看起来真不错，有时间我也自己尝试一下！</p>
                    </div>
                    <div class="clearfix"> </div>
                </div>
            </div> -->
            <div class="leave-comment">
                <h3>留下你的评论</h3>
                <p>已经很久了，但并不总是很久了，而是很久以前。</p>
               

                    <textarea class="comment" placeholder="评论" required=" " v-model="comment"></textarea>
                    <input type="button"  value="发送" style="background-color:#f87102d2;
                     height: 52px;width: 286px;display: block;color:#fff;border: none" @click="addComment()">
                    <div class="clearfix" > </div>
                
            </div>
        </div>
    </div>
    <!-- //single -->
    <!--- footer --->
    <div class="footer">
        <div class="container">
            <div class="footer-grids">
                <div class="col-md-3 footer-grid">
                    <h3>关于我们</h3>
                </div>
                <div class="col-md-3 footer-grid">
                    <h3>用户协议</h3>
                </div>
                <div class="col-md-3 footer-grid">
                    <h3>隐私政策</h3>
                </div>
               
                <div class="clearfix"> </div>
            </div>
        </div>
    </div>
    <div class="clear"> </div>
    <div class="copy-right">
        <p>Copyright &copy; 2022.美食网站版权所有</p>
    </div>
    <!--- //footer --->
    <!-- for bootstrap working -->
    <script src="../../js/bootstrap.js">
    </script>
    <!-- //for bootstrap working -->
   </div>
</body>
<script>
    new Vue({
        el:"#app",
        data:{
            hello:"helloWorld",
            id:"",
            blog:{},
            comments:[],
            comment:"",
            auth:""
           
        },
        // 创建就运行
        async created() {
            this.isAdmin()
            await this.getIdFromUrl()
            await this.getById()
            await this.getComment()
        },
        // 方法
        methods: {
            //判断是否是管理员
            isAdmin(){
                this.auth = sessionStorage.getItem("auth")
            },
            //添加评论
            async addComment(){
                if(!sessionStorage.getItem("number")){
                    alert("请先登录")
                    return
                }
                 // 准备数据
                 const data = {
                    "blogId":this.blog.id,
                    "content":this.comment,
                    "user_number":sessionStorage.getItem("number")
                }
                // 发送请求
                const response = await fetch("http://127.0.0.1:5001/comment/add",{
                    method: 'POST',
                    headers:{
                        'Content-Type':'application/json'
                    },
                    body:JSON.stringify(data)
                })
                const res = await response.json()
                this.comment = ""
                this.getComment()
            },
            // 从url获取id
            getIdFromUrl() {  
                const searchParams = new URLSearchParams(window.location.search);  
                this.id = searchParams.get('id');  
            },
            async getById(){
                const response =  await fetch('http://127.0.0.1:5001/blog/getById?id='+this.id)
                const data = await response.json();
                // 给数据赋值
                this.blog =  data.data[0]
            },
            async getComment(){
                const response =  await fetch('http://127.0.0.1:5001/comment/getComment?blogId='+this.id)
                const data = await response.json();
                // 给数据赋值
                this.comments =  data.data
            },
            //删除
            async deleteCommentById(id){
                console.log(id)
                const response =  await fetch('http://127.0.0.1:5001/comment/delete?id='+id)
                const data = await response.json();
                if(data.code==200){
                    alert("删除成功")
                    this.getComment()
                }
                
            }
        }
    })
</script>
</html>